import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from "@tarojs/components"
import './cata.scss'
class Cata extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      active: null,
      cata: [
        { name: "专场", id: 1 },
        { name: "热销", id: 2 },
        { name: "折扣", id: 3 },
        { name: "主食", id: 4 },
        { name: "热炒", id: 5 },
        { name: "凉菜", id: 6 },
        { name: "特色乱炖", id: 7 }
      ]
    }
  }
  handleCata(item) {
    let { active } = this.state;
    if (active && active != item.id) {
      this.setState({ active: item }, () => {
        this.props.onChangeCata && this.props.onChangeCata(this.state.active)
      })
    } else if (!active) {
      this.setState({ active: item }, () => {
        this.props.onChangeCata && this.props.onChangeCata(this.state.active)
      })
    }
  }
  render() {
    const { cata, active } = this.state;
    return (
      <View className="cata">
        {cata.map((item, index) => {
          return (
            <Text
              onClick={this.handleCata.bind(this, item)}
              className={"cata-name " + (active && active == item.id ? "active" : "")}
              key={item.id}>
              {item.name}
            </Text>)
        })}
      </View>
    )
  }
}
export default Cata